extensions-app: Use details popover

Showing all the extension info and possible actions in every
row is fairly noisy, and doesn't match the usual list patterns.

Streamline the UI by moving the actions and most of the info into
a details popover, so the rows themselves get closer to the
standard pattern.

Closes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7119

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3051>

diff --git a/subprojects/extensions-app/data/css/style.css b/subprojects/extensions-app/data/css/style.css
index f9fafa717edd5ed09f5ab4514bed62b4cfabd1bc..8564ba5014f2a83a5b0f9ccafcb1e491c1bd4f3e 100644 (file)
--- a/subprojects/extensions-app/data/css/style.css
+++ b/subprojects/extensions-app/data/css/style.css
@@ -1,18 +1,16 @@
-row.extension>box {
- margin: 12px;
+.details-popover contents {
+  padding: 12px;
 }
 
-row.extension>box,
-row.extension box.header {
-  border-spacing: 12px;
+.details-popover .information {
+  border-spacing: 6px;
 }
 
-row.extension box.actions,
-row.extension box.actions>box {
-  border-spacing: 6px;
+.details-popover .actions {
+  margin-top: 6px;
+  border-spacing: 12px;
 }
 
-row.extension box.information,
-row.extension box.status {
-  border-spacing: 3px;
+.details-popover .actions button {
+  padding: 12px;
 }

diff --git a/subprojects/extensions-app/data/icons/scalable/actions/remove-symbolic.svg b/subprojects/extensions-app/data/icons/scalable/actions/remove-symbolic.svg
new file mode 100644 (file)
index 0000000..b6f8bd1
--- /dev/null
+++ b/subprojects/extensions-app/data/icons/scalable/actions/remove-symbolic.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#2e3436">
+        <path d="m 1 3 h 14 c 0.550781 0 1 0.449219 1 1 s -0.449219 1 -1 1 h -14 c -0.550781 0 -1 -0.449219 -1 -1 s 0.449219 -1 1 -1 z m 0 0"/>
+        <path d="m 4 4 v -1.5 c 0 -1.386719 1.113281 -2.5 2.5 -2.5 h 2.980469 c 1.382812 0 2.5 1.113281 2.5 2.5 v 1.5 h -2 v -1.5 c 0 -0.269531 -0.230469 -0.5 -0.5 -0.5 h -2.980469 c -0.269531 0 -0.5 0.230469 -0.5 0.5 v 1.5 z m 0 0"/>
+        <path d="m 4 4 v 9 c 0 0.546875 0.453125 1 1 1 h 6 c 0.546875 0 1 -0.453125 1 -1 v -9 h 2 v 9 c 0 1.660156 -1.339844 3 -3 3 h -6 c -1.660156 0 -3 -1.339844 -3 -3 v -9 z m 0 0"/>
+        <path d="m 7 7 v 5 c 0 0.277344 -0.222656 0.5 -0.5 0.5 s -0.5 -0.222656 -0.5 -0.5 v -5 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 s 0.5 0.222656 0.5 0.5 z m 0 0"/>
+        <path d="m 10 7 v 5 c 0 0.277344 -0.222656 0.5 -0.5 0.5 s -0.5 -0.222656 -0.5 -0.5 v -5 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 s 0.5 0.222656 0.5 0.5 z m 0 0"/>
+    </g>
+</svg>

diff --git a/subprojects/extensions-app/data/icons/scalable/actions/settings-symbolic.svg b/subprojects/extensions-app/data/icons/scalable/actions/settings-symbolic.svg
new file mode 100644 (file)
index 0000000..4ac785e
--- /dev/null
+++ b/subprojects/extensions-app/data/icons/scalable/actions/settings-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><path d="m 7.5 1.019531 c -0.550781 0 -0.996094 0.445313 -0.996094 0.996094 v 0.453125 c -0.472656 0.128906 -0.929687 0.320312 -1.355468 0.566406 l -0.324219 -0.324218 c -0.390625 -0.390626 -1.019531 -0.390626 -1.410157 0 l -0.703124 0.707031 c -0.390626 0.390625 -0.390626 1.019531 0 1.410156 l 0.320312 0.320313 c -0.246094 0.425781 -0.433594 0.882812 -0.5625 1.355468 h -0.453125 c -0.550781 0 -0.996094 0.445313 -0.996094 0.996094 v 1 c 0 0.550781 0.445313 0.996094 0.996094 0.996094 h 0.449219 c 0.132812 0.472656 0.320312 0.929687 0.566406 1.355468 l -0.320312 0.320313 c -0.390626 0.390625 -0.390626 1.019531 0 1.410156 l 0.703124 0.707031 c 0.390626 0.390626 1.019532 0.390626 1.410157 0 l 0.320312 -0.320312 c 0.429688 0.242188 0.882813 0.433594 1.359375 0.558594 v 0.457031 c 0 0.550781 0.445313 0.996094 0.996094 0.996094 h 0.996094 c 0.554687 0 1 -0.445313 1 -0.996094 v -0.453125 c 0.472656 -0.128906 0.929687 -0.320312 1.355468 -0.566406 l 0.320313 0.324218 c 0.390625 0.390626 1.019531 0.390626 1.410156 0 l 0.707031 -0.707031 c 0.390626 -0.390625 0.390626 -1.019531 0 -1.410156 l -0.320312 -0.320313 c 0.242188 -0.425781 0.433594 -0.882812 0.558594 -1.355468 h 0.453125 c 0.554687 0 1 -0.445313 1 -0.996094 v -1 c 0 -0.550781 -0.445313 -0.996094 -1 -0.996094 h -0.449219 c -0.128906 -0.472656 -0.320312 -0.929687 -0.566406 -1.355468 l 0.324218 -0.320313 c 0.390626 -0.390625 0.390626 -1.019531 0 -1.410156 l -0.707031 -0.707031 c -0.390625 -0.390626 -1.019531 -0.390626 -1.410156 0 l -0.320313 0.320312 c -0.425781 -0.242188 -0.882812 -0.429688 -1.355468 -0.558594 v -0.457031 c 0 -0.550781 -0.445313 -0.996094 -1 -0.996094 z m 0.515625 3.976563 c 1.660156 0 3 1.34375 3 3 s -1.339844 3 -3 3 c -1.65625 0 -3 -1.34375 -3 -3 s 1.34375 -3 3 -3 z m 0 0" fill="#222222"/><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -540 -282)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -540 -282)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -540 -282)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g></svg>

diff --git a/subprojects/extensions-app/data/icons/scalable/actions/website-symbolic.svg b/subprojects/extensions-app/data/icons/scalable/actions/website-symbolic.svg
new file mode 100644 (file)
index 0000000..1a5b3c9
--- /dev/null
+++ b/subprojects/extensions-app/data/icons/scalable/actions/website-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><path d="m 7.5 0 c -4.128906 0 -7.5 3.371094 -7.5 7.5 s 3.371094 7.5 7.5 7.5 s 7.5 -3.371094 7.5 -7.5 s -3.371094 -7.5 -7.5 -7.5 z m 1.84375 2.3125 c 0.953125 0.335938 1.78125 0.925781 2.40625 1.6875 h -1.226562 c -0.304688 -0.609375 -0.699219 -1.179688 -1.179688 -1.6875 z m -3.71875 0.011719 c -0.472656 0.507812 -0.867188 1.070312 -1.171875 1.675781 h -1.203125 c 0.617188 -0.753906 1.4375 -1.335938 2.375 -1.675781 z m 1.375 0.097656 v 1.578125 h -1.398438 c 0.363282 -0.59375 0.828126 -1.128906 1.398438 -1.578125 z m 1 0.015625 c 0.558594 0.445312 1.019531 0.976562 1.378906 1.5625 h -1.378906 z m -5.402344 2.5625 h 1.441406 c -0.214843 0.644531 -0.347656 1.320312 -0.390624 2 h -1.625 c 0.0625 -0.714844 0.265624 -1.390625 0.574218 -2 z m 2.507813 0 h 1.894531 v 2 h -2.34375 c 0.046875 -0.683594 0.195312 -1.359375 0.449219 -2 z m 2.894531 0 h 1.875 c 0.253906 0.640625 0.402344 1.316406 0.449219 2 h -2.324219 z m 2.941406 0 h 1.460938 c 0.308594 0.609375 0.511718 1.285156 0.574218 2 h -1.644531 c -0.042969 -0.679688 -0.175781 -1.355469 -0.390625 -2 z m -8.917968 3 h 1.625 c 0.046874 0.679688 0.175781 1.355469 0.394531 2 h -1.445313 c -0.308594 -0.609375 -0.511718 -1.285156 -0.574218 -2 z m 2.632812 0 h 2.34375 v 2 h -1.890625 c -0.253906 -0.636719 -0.402344 -1.316406 -0.453125 -2 z m 3.34375 0 h 2.324219 c -0.050781 0.683594 -0.199219 1.363281 -0.453125 2 h -1.871094 z m 3.332031 0 h 1.644531 c -0.0625 0.714844 -0.265624 1.390625 -0.574218 2 h -1.464844 c 0.21875 -0.644531 0.347656 -1.320312 0.394531 -2 z m -8.082031 3 h 1.210938 c 0.3125 0.609375 0.710937 1.179688 1.195312 1.6875 c -0.953125 -0.335938 -1.78125 -0.925781 -2.40625 -1.6875 z m 2.363281 0 h 1.386719 v 1.550781 c -0.5625 -0.441406 -1.027344 -0.96875 -1.386719 -1.550781 z m 2.386719 0 h 1.367188 c -0.355469 0.578125 -0.8125 1.097656 -1.367188 1.535156 z m 2.519531 0 h 1.230469 c -0.632812 0.769531 -1.472656 1.363281 -2.4375 1.695312 c 0.492188 -0.507812 0.894531 -1.082031 1.207031 -1.695312 z m 0 0" fill="#222222"/><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -720 -100)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -720 -100)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -720 -100)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g></svg>

diff --git a/subprojects/extensions-app/data/org.gnome.Extensions.data.gresource.xml.in b/subprojects/extensions-app/data/org.gnome.Extensions.data.gresource.xml.in
index 47aaf8cd8526f4536483836c7818bda32fa9245e..fe9cbad08b773a72487227416ff2b74c2c78db0b 100644 (file)
--- a/subprojects/extensions-app/data/org.gnome.Extensions.data.gresource.xml.in
+++ b/subprojects/extensions-app/data/org.gnome.Extensions.data.gresource.xml.in
@@ -4,6 +4,9 @@
     <file alias="style.css">css/style.css</file>
 
     <file preprocess="xml-stripblanks">icons/scalable/actions/info-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">icons/scalable/actions/remove-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">icons/scalable/actions/settings-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">icons/scalable/actions/website-symbolic.svg</file>
 
     <file alias="gtk/help-overlay.ui">ui/help-overlay.ui</file>
   </gresource>

diff --git a/subprojects/extensions-app/data/ui/extension-row.ui b/subprojects/extensions-app/data/ui/extension-row.ui
index 38c374ab1be76579e3e5a5c1811804509da77a96..5208a9aa6e81a7538eb3e67c0393ed9a3dd8e9bc 100644 (file)
--- a/subprojects/extensions-app/data/ui/extension-row.ui
+++ b/subprojects/extensions-app/data/ui/extension-row.ui
@@ -1,173 +1,227 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-  <template class="ExtensionRow" parent="GtkListBoxRow">
-    <style>
-      <class name="extension"/>
-    </style>
-    <child>
-      <object class="GtkBox">
-        <property name="orientation">vertical</property>
-        <child>
-          <object class="GtkBox">
-            <child>
-              <object class="GtkBox">
-                <property name="orientation">vertical</property>
-                <property name="hexpand">true</property>
-                <style>
-                  <class name="information"/>
-                </style>
-                <child>
+  <template class="ExtensionRow" parent="AdwActionRow">
+    <property name="activatable-widget">switch</property>
+    <child type="suffix">
+      <object class="GtkMenuButton" id="errorButton">
+        <property name="visible">false</property>
+        <property name="valign">center</property>
+        <property name="has-frame">false</property>
+        <property name="icon-name">dialog-error-symbolic</property>
+        <accessibility>
+          <property name="label" translatable="yes">Error Details</property>
+        </accessibility>
+        <property name="popover">
+          <object class="GtkPopover" id="errorPopover">
+            <property name="child">
+              <object class="AdwClamp">
+                <property name="maximum-size">300</property>
+                <property name="tightening-threshold">300</property>
+                <property name="child">
+                  <object class="GtkLabel" id="errorLabel">
+                    <!-- Hack to make the screen reader read the label -->
+                    <property name="selectable"
+                              bind-source="errorPopover"
+                              bind-property="visible"
+                              bind-flags="invert-boolean|sync-create"/>
+                    <property name="wrap">true</property>
+                  </object>
+                </property>
+              </object>
+            </property>
+          </object>
+        </property>
+      </object>
+    </child>
+    <child type="suffix">
+      <object class="GtkMenuButton" id="updatesButton">
+        <property name="visible">false</property>
+        <property name="valign">center</property>
+        <property name="has-frame">false</property>
+        <property name="icon-name">software-update-available-symbolic</property>
+        <accessibility>
+          <property name="label" translatable="yes">Updates Details</property>
+        </accessibility>
+        <property name="popover">
+          <object class="GtkPopover" id="updatesPopover">
+            <property name="child">
+              <object class="AdwClamp">
+                <property name="maximum-size">200</property>
+                <property name="tightening-threshold">200</property>
+                <property name="child">
+                  <object class="GtkLabel">
+                    <property name="label" translatable="yes">A new version of this extension is ready and will be loaded on next login.</property>
+                    <property name="wrap">true</property>
+                    <!-- Hack to make the screen reader read the label -->
+                    <property name="selectable"
+                              bind-source="updatesPopover"
+                              bind-property="visible"
+                              bind-flags="invert-boolean|sync-create"/>
+                  </object>
+                </property>
+              </object>
+            </property>
+          </object>
+        </property>
+      </object>
+    </child>
+    <child type="suffix">
+      <object class="GtkSwitch" id="switch">
+        <property name="valign">center</property>
+        <property name="action-name">row.enabled</property>
+      </object>
+    </child>
+    <child type="suffix">
+      <object class="GtkMenuButton">
+        <property name="icon-name">view-more-symbolic</property>
+        <property name="has-frame">false</property>
+        <property name="valign">center</property>
+        <accessibility>
+          <property name="label" translatable="yes">Extension Details</property>
+        </accessibility>
+        <property name="popover">
+          <object class="GtkPopover" id="detailsPopover">
+            <style>
+              <class name="details-popover"/>
+            </style>
+            <property name="child">
+              <object class="AdwClamp">
+                <property name="maximum-size">300</property>
+                <property name="tightening-threshold">300</property>
+                <property name="child">
                   <object class="GtkBox">
+                    <property name="orientation">vertical</property>
                     <style>
-                      <class name="header"/>
+                      <class name="information"/>
                     </style>
                     <child>
-                      <object class="GtkLabel" id="nameLabel">
+                      <object class="GtkLabel">
+                        <property name="label"
+                                  bind-source="ExtensionRow"
+                                  bind-property="title"
+                                  bind-flags="sync-create"/>
                         <property name="xalign">0</property>
+                    <!-- Hack to make the screen reader read the label -->
+                        <property name="selectable"
+                                  bind-source="detailsPopover"
+                                  bind-property="visible"
+                                  bind-flags="invert-boolean|sync-create"/>
                         <style>
-                          <class name="title"/>
+                          <class name="title-4"/>
                         </style>
                       </object>
                     </child>
+                    <child>
+                      <object class="GtkLabel" id="descriptionLabel">
+                        <property name="xalign">0</property>
+                        <property name="wrap">True</property>
+                        <property name="selectable">true</property>
+                      </object>
+                    </child>
                     <child>
                       <object class="GtkLabel" id="versionLabel">
                         <property name="visible">false</property>
                         <property name="xalign">0</property>
-                        <property name="yalign">1</property>
+                        <property name="selectable">true</property>
                         <style>
-                          <class name="caption"/>
                           <class name="dim-label"/>
                         </style>
                       </object>
                     </child>
                     <child>
-                      <object class="GtkBox">
+                      <object class="GtkBox" id="actionsBox">
                         <style>
-                          <class name="status"/>
+                          <class name="actions"/>
                         </style>
                         <child>
-                          <object class="GtkMenuButton" id="errorButton">
-                            <property name="visible">false</property>
-                            <property name="valign">center</property>
-                            <property name="has-frame">false</property>
-                            <property name="icon-name">dialog-error-symbolic</property>
-                            <accessibility>
-                              <property name="label" translatable="yes">Error Details</property>
-                            </accessibility>
-                            <property name="popover">
-                              <object class="GtkPopover" id="errorPopover">
-                                <property name="child">
-                                  <object class="AdwClamp">
-                                    <property name="maximum-size">300</property>
-                                    <property name="tightening-threshold">300</property>
-                                    <property name="child">
-                                      <object class="GtkLabel" id="errorLabel">
-                                        <!-- Hack to make the screen reader read the label -->
-                                        <property name="selectable"
-                                                  bind-source="errorPopover"
-                                                  bind-property="visible"
-                                                  bind-flags="invert-boolean|sync-create"/>
-                                        <property name="wrap">true</property>
-                                      </object>
-                                    </property>
+                          <object class="GtkButton" id="websiteButton">
+                            <property name="visible"
+                                      bind-source="websiteButton"
+                                      bind-property="sensitive"
+                                      bind-flags="sync-create"/>
+                            <property name="hexpand">true</property>
+                            <property name="action-name">row.show-url</property>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="orientation">vertical</property>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="icon-name">website-symbolic</property>
+                                    <property name="accessible-role">presentation</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="use-underline">true</property>
+                                    <property name="label" translatable="yes">_Website</property>
                                   </object>
-                                </property>
+                                </child>
                               </object>
-                            </property>
+                            </child>
                           </object>
                         </child>
                         <child>
-                          <object class="GtkMenuButton" id="updatesButton">
-                            <property name="visible">false</property>
-                            <property name="valign">center</property>
-                            <property name="has-frame">false</property>
-                            <property name="icon-name">software-update-available-symbolic</property>
-                            <accessibility>
-                              <property name="label" translatable="yes">Updates Details</property>
-                            </accessibility>
-                            <property name="popover">
-                              <object class="GtkPopover" id="updatesPopover">
-                                <property name="child">
-                                  <object class="AdwClamp">
-                                    <property name="maximum-size">200</property>
-                                    <property name="tightening-threshold">200</property>
-                                    <property name="child">
-                                      <object class="GtkLabel">
-                                        <property name="label" translatable="yes">A new version of this extension is ready and will be loaded on next login.</property>
-                                        <!-- Hack to make the screen reader read the label -->
-                                        <property name="selectable"
-                                                  bind-source="updatesPopover"
-                                                  bind-property="visible"
-                                                  bind-flags="invert-boolean|sync-create"/>
-                                        <property name="wrap">true</property>
-                                      </object>
-                                    </property>
+                          <object class="GtkButton" id="prefsButton">
+                            <property name="visible"
+                                      bind-source="prefsButton"
+                                      bind-property="sensitive"
+                                      bind-flags="sync-create"/>
+                            <property name="hexpand">true</property>
+                            <property name="action-name">row.show-prefs</property>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="orientation">vertical</property>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="icon-name">settings-symbolic</property>
+                                    <property name="accessible-role">presentation</property>
                                   </object>
-                                </property>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="use-underline">true</property>
+                                    <property name="label" translatable="yes">_Settings</property>
+                                  </object>
+                                </child>
                               </object>
-                            </property>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkButton" id="removeButton">
+                            <property name="visible"
+                                      bind-source="removeButton"
+                                      bind-property="sensitive"
+                                      bind-flags="sync-create"/>
+                            <property name="hexpand">true</property>
+                            <property name="action-name">row.uninstall</property>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="orientation">vertical</property>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="icon-name">remove-symbolic</property>
+                                    <property name="accessible-role">presentation</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="use-underline">true</property>
+                                    <property name="label" translatable="yes">_Remove…</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
                           </object>
                         </child>
                       </object>
                     </child>
                   </object>
-                </child>
-                <child>
-                  <object class="GtkLabel" id="descriptionLabel">
-                    <property name="xalign">0</property>
-                    <property name="ellipsize">end</property>
-                    <style>
-                      <class name="subtitle"/>
-                    </style>
-                  </object>
-                </child>
-              </object>
-            </child>
-            <child>
-              <object class="GtkSwitch" id="switch">
-                <property name="valign">center</property>
-                <property name="action-name">row.enabled</property>
-              </object>
-            </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkCenterBox" id="actionsBox">
-            <style>
-              <class name="actions"/>
-            </style>
-            <child type="start">
-              <object class="GtkBox">
-                <child>
-                  <object class="GtkButton" id="websiteButton">
-                    <property name="label" translatable="yes">Website</property>
-                    <property name="action-name">row.show-url</property>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkButton" id="prefsButton">
-                    <property name="visible"
-                              bind-source="prefsButton"
-                              bind-property="sensitive"
-                              bind-flags="sync-create"/>
-                    <property name="label" translatable="yes">Settings</property>
-                    <property name="action-name">row.show-prefs</property>
-                  </object>
-                </child>
-              </object>
-            </child>
-            <child type="end">
-              <object class="GtkButton" id="removeButton">
-                <property name="visible"
-                          bind-source="removeButton"
-                          bind-property="sensitive"
-                          bind-flags="sync-create"/>
-                <property name="label" translatable="yes">Remove…</property>
-                <property name="action-name">row.uninstall</property>
+                </property>
               </object>
-            </child>
+            </property>
           </object>
-        </child>
+        </property>
       </object>
     </child>
   </template>

diff --git a/subprojects/extensions-app/js/main.js b/subprojects/extensions-app/js/main.js
index 0388eb693a4d0a12ac7bd88e3e764164e777b9d0..e9a3183d27107d181ff9dca1fb1ae2e2ca5e4fa0 100644 (file)
--- a/subprojects/extensions-app/js/main.js
+++ b/subprojects/extensions-app/js/main.js
@@ -357,7 +357,7 @@ var ExtensionRow = GObject.registerClass({
     GTypeName: 'ExtensionRow',
     Template: 'resource:///org/gnome/Extensions/ui/extension-row.ui',
     InternalChildren: [
-        'nameLabel',
+        'detailsPopover',
         'descriptionLabel',
         'versionLabel',
         'errorLabel',
@@ -366,7 +366,7 @@ var ExtensionRow = GObject.registerClass({
         'switch',
         'actionsBox',
     ],
-}, class ExtensionRow extends Gtk.ListBoxRow {
+}, class ExtensionRow extends Adw.ActionRow {
     _init(extension) {
         super._init();
 
@@ -384,7 +384,10 @@ var ExtensionRow = GObject.registerClass({
             name: 'show-prefs',
             enabled: this.hasPrefs,
         });
-        action.connect('activate', () => this.get_root().openPrefs(this.uuid));
+        action.connect('activate', () => {
+            this._detailsPopover.popdown();
+            this.get_root().openPrefs(this.uuid);
+        });
         this._actionGroup.add_action(action);
 
         action = new Gio.SimpleAction({
@@ -392,6 +395,7 @@ var ExtensionRow = GObject.registerClass({
             enabled: this.url !== '',
         });
         action.connect('activate', () => {
+            this._detailsPopover.popdown();
             Gio.AppInfo.launch_default_for_uri(
                 this.url, this.get_display().get_app_launch_context());
         });
@@ -401,7 +405,10 @@ var ExtensionRow = GObject.registerClass({
             name: 'uninstall',
             enabled: this.type === ExtensionType.PER_USER,
         });
-        action.connect('activate', () => this.get_root().uninstall(this.uuid));
+        action.connect('activate', () => {
+            this._detailsPopover.popdown();
+            this.get_root().uninstall(this.uuid);
+        });
         this._actionGroup.add_action(action);
 
         action = new Gio.SimpleAction({
@@ -417,7 +424,7 @@ var ExtensionRow = GObject.registerClass({
         });
         this._actionGroup.add_action(action);
 
-        this._nameLabel.label = this.name;
+        this.title = this.name;
 
         const desc = this._extension.metadata.description.split('\n')[0];
         this._descriptionLabel.label = desc;
@@ -436,10 +443,6 @@ var ExtensionRow = GObject.registerClass({
         this._updateState();
     }
 
-    vfunc_activate() {
-        this._switch.mnemonic_activate(false);
-    }
-
     get uuid() {
         return this._extension.uuid;
     }
@@ -520,7 +523,7 @@ var ExtensionRow = GObject.registerClass({
         this._errorButton.visible = this.hasError;
         this._errorLabel.label = this.error;
 
-        this._versionLabel.label = this.version.toString();
+        this._versionLabel.label = _('Version %s').format(this.version.toString());
         this._versionLabel.visible = this.version !== '';
     }